<!--
author: 何其沆(pooky)
desc: 柱状图
date: 2021-11-18
-->
<template>
  <div class="charts-area-item">
    <e-title title="Sales Statistics" />
    <div ref="chart" class="chart-instance"></div>
    <div v-if="yearData.length > 0" class="year">{{ year }}</div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts/core'
import { GridComponent, MarkLineComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import ETitle from '@/components/ETitle.vue'
echarts.use([GridComponent, MarkLineComponent, BarChart, CanvasRenderer])

const store = useStore()
const props = defineProps({
  currentYear: Number
})
const year = ref(props.currentYear)
const chart = ref(null)
const data = ref({})
let pieChart = null
/**
 * 生成图表
 */
const getChart = () => {
  if (pieChart !== null && pieChart !== '' && pieChart !== undefined) {
    pieChart.dispose()
  }
  pieChart = echarts.init(chart.value)
  pieChart.setOption({
    color: ['#ff6868', '#89d9af', '#8ea9fc'],
    legend: {
      data: [`${year.value} Sales Quota`, `${year.value} Cumulative Revenue`, `${year.value} Projected Sales Revenue`],
      top: 20,
      itemWidth: 18,
      itemHeight: 18,
      itemGap: 30,
      icon: 'circle',
      textStyle: {
        fontSize: 14,
        color: 'rgba(107, 121, 142, 0.85)'
      },
      selectedMode: false
    },
    tooltip: {
      formatter: '{a}：{c}w'
    },
    grid: {
      top: '30%',
      bottom: '10%',
      left: '26%',
      right: '22%'
    },
    xAxis: {
      type: 'category',
      data: [`${year.value}年`],
      axisLine: {
        lineStyle: {
          color: '#d3d3d3'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(107, 121, 142, 0.85)'
        },
        show: false
      }
    },
    yAxis: {
      name: '(RMB)',
      nameTextStyle: {
        color: 'rgba(107, 121, 142, 0.85)'
      },
      splitArea: {
        show: false
      },
      type: 'value',
      axisLabel: {
        formatter: '{value}w',
        textStyle: {
          color: 'rgba(107, 121, 142, 0.85)'
        }
      }
    },
    series: [
      {
        barGap: '-78.5%',
        barWidth: 120,
        data: [(data?.value?.planSaleAmount / 10000).toFixed(1)],
        name: `${year.value} Sales Quota`,
        type: 'bar',
        zlevel: 1,
        markLine: {
          symbol: 'none',
          tooltip: {
            show: false
          },
          data: [
            {
              label: {
                formatter: (data?.value?.planSaleAmount / 10000).toFixed(1) + 'w',
                textStyle: {
                  fontSize: 18,
                  color: '#3d3d3d',
                  fontWeight: 'bold'
                }
              },
              yAxis: (data?.value?.planSaleAmount / 10000).toFixed(1)
            }
          ]
        }
      },
      {
        barGap: '-78.5%',
        barWidth: 70,
        data: [(data?.value?.yearSaleAmount / 10000).toFixed(1)],
        name: `${year.value} Cumulative Revenue`,
        type: 'bar',
        zlevel: 2,
        markLine: {
          symbol: 'none',
          tooltip: {
            show: false
          },
          data: [
            {
              label: {
                formatter: (data?.value?.yearSaleAmount / 10000).toFixed(1) + 'w',
                textStyle: {
                  fontSize: 18,
                  color: '#3d3d3d',
                  fontWeight: 'bold'
                }
              },
              yAxis: (data?.value?.yearSaleAmount / 10000).toFixed(1)
            }
          ]
        }
      },
      {
        barGap: '-78.5%',
        barWidth: 40,
        data: [(data?.value?.estimateSaleAmount / 10000).toFixed(1)],
        name: `${year.value} Projected Sales Revenue`,
        type: 'bar',
        zlevel: 3,
        markLine: {
          symbol: 'none',
          tooltip: {
            show: false
          },
          data: [
            {
              label: {
                formatter: (data?.value?.estimateSaleAmount / 10000).toFixed(1) + 'w',
                textStyle: {
                  fontSize: 18,
                  color: '#3d3d3d',
                  fontWeight: 'bold'
                }
              },
              yAxis: (data?.value?.estimateSaleAmount / 10000).toFixed(1)
            }
          ]
        }
      }
    ]
  })
}
/**
 * 获取年数据
 * @type {ComputedRef<[]|*>}
 */
const yearData = ref(
  computed(() => {
    return store.state.pm.adminYearData
  })
)
/**
 * 获取季度数据
 * @type {ComputedRef<[]|*>}
 */
const quarterData = ref(
  computed(() => {
    return store.state.pm.adminQuarterData
  })
)
/**
 * 获取月数据
 * @type {ComputedRef<[]|*>}
 */
const monthData = ref(
  computed(() => {
    return store.state.pm.adminMonthData
  })
)
/**
 * 监听数据变化
 */
watch(
  () => [yearData, quarterData, monthData],
  ([yVal, qVal, mVal]) => {
    setTimeout(() => {
      if (yVal.value.length !== 0) {
        data.value = yVal.value.data.sales
      } else if (qVal.value.length !== 0) {
        data.value = qVal.value.data.sales
      } else if (mVal.value.length !== 0) {
        data.value = mVal.value.data.sales
      }
      getChart()
    }, 0)
  },
  {
    deep: true
  }
)
const flag = ref(
  computed(() => {
    return store.state.pm.flag
  })
)
watch(
  () => flag.value,
  () => {
    pieChart.resize()
  },
  {
    deep: true
  }
)
watch(
  () => props.currentYear,
  val => {
    year.value = val
  }
)
</script>

<style scoped lang="less">
.charts-area-item {
  flex: 1;
  box-shadow: 0 1px 3px @shadow-color;
  background-color: @white;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  .chart-instance {
    height: 400px;
  }
  .year {
    position: absolute;
    bottom: 7%;
    left: 52%;
    z-index: 9999;
    color: @text-gray;
    font-size: 14px;
  }
}
</style>
